import React, { useState, useEffect } from "react";
import { getTrainingList} from "../../../api/sjq";
import "./training.scss";
import TrainingPage from '../../../components/trainings/training_page/TrainingPage'
import TrainingFavor from '../../../components/trainings/training_favor/TrainingFavor'
import TrainingCorrelation from '../../../components/trainings/training_correlation/TrainingCorrelation'
import {
  Tabs,
  Descriptions,
  PageHeader,
  Progress,
  Pagination,
} from "antd";
const { TabPane } = Tabs;
function callback(key) {
  console.log(key);
}
const Training = (props) => {
  //项目数据
  let [getList, setGetList] = useState([]);
  //总数
  const [total,setTotal] = useState(0);
  //当前页码数
  const [current,setCurrent] = useState(1);
  //页码数量
  const [pageSize,setPageSize] = useState(5);
  //初始化进行中页面数据
  useEffect(() => {
    async function getData() {
      const res = await getTrainingList({
        planType:1,
        pageSize,
        pageNum:current
      });
      setGetList(res.data.rows);
      setTotal(res.data.total);
    }
    getData();
  }, [current,pageSize]);
  let [getList2, setGetList2] = useState([]);
  //初始化已结束页面数据
  useEffect(() => {
    async function getData() {
      const res = await getTrainingList({
        planType:2,
        pageSize: 5,
        pageNum:current
      });
      setGetList2(res.data.rows);
      setTotal(res.data.total);
    }
    getData();
  }, [current,pageSize]);
  let [getList0, setGetList0] = useState([]);
  //初始化未进行页面数据
  useEffect(() => {
    async function getData() {
      const res = await getTrainingList({
        planType:0,
        pageSize: 5,
        pageNum:current
      });
      setGetList0(res.data.rows);
      setTotal(res.data.total);
    }
    getData();
  }, [current,pageSize]);
  return (
    <div id="training">
      <div className="training_left">
        <Tabs defaultActiveKey="1" onChange={callback}>
          <TabPane tab="小组项目" key="1">
            <div className="card-container">
              <Tabs type="card" defaultActiveKey="2">
                {/* 未开始页面 */}
                <TabPane tab="未开始" key="1">
                {getList0.map((item, index) => (
                    <div className="site-page-header-ghost-wrapper" key={index}>
                      <PageHeader
                        title={item.planName}
                        extra={[
                          <Descriptions.Item label="Creation Time" key={index}>
                            {item.planClassName}
                          </Descriptions.Item>,
                        ]}
                      >
                        <Descriptions size="small" column={3}>
                          <Descriptions.Item>
                            项目{item.projectCount}个
                          </Descriptions.Item>
                          <Descriptions.Item>
                            时长{parseInt((new Date(item.endDate)*1-new Date(item.beginDate)*1)/1000/60/60/24)}天
                          </Descriptions.Item>
                          <Descriptions.Item></Descriptions.Item>
                          <Descriptions.Item>
                            {item.beginDate}
                          </Descriptions.Item>
                          <Descriptions.Item>{item.endDate}</Descriptions.Item>
                        </Descriptions>
                        <Progress percent={item.planProgress} status="active" />
                        <TrainingPage {...props} id={item.id} />
                      </PageHeader>
                    </div>
                  ))}
                </TabPane>
                {/* 进行中页面 */}
                <TabPane tab="进行中" key="2">
                  {getList.map((item, index) => (
                    <div className="site-page-header-ghost-wrapper" key={index}>
                      <PageHeader
                        title={item.planName}
                        extra={[
                          <Descriptions.Item label="Creation Time" key={index}>
                            {item.planClassName}
                          </Descriptions.Item>,
                        ]}
                      >
                        <Descriptions size="small" column={3}>
                          <Descriptions.Item>
                            项目{item.projectCount}个
                          </Descriptions.Item>
                          <Descriptions.Item>
                            时长{parseInt((new Date(item.endDate)*1-new Date(item.beginDate)*1)/1000/60/60/24)}天
                          </Descriptions.Item>
                          <Descriptions.Item></Descriptions.Item>
                          <Descriptions.Item>
                            {item.beginDate}
                          </Descriptions.Item>
                          <Descriptions.Item>{item.endDate}</Descriptions.Item>
                        </Descriptions>
                        <Progress percent={item.planProgress} status="active" />
                        <TrainingPage {...props} id={item.id} />
                      </PageHeader>
                    </div>
                  ))}
                </TabPane>
                {/* 已结束页面 */}
                <TabPane tab="已结束" key="3">
                {getList2.map((item, index) => (
                    <div className="site-page-header-ghost-wrapper" key={index}>
                      <PageHeader
                        title={item.planName}
                        extra={[
                          <Descriptions.Item label="Creation Time" key={index}>
                            {item.planClassName}
                          </Descriptions.Item>,
                        ]}
                      >
                        <Descriptions size="small" column={3}>
                          <Descriptions.Item>
                            项目{item.projectCount}个
                          </Descriptions.Item>
                          <Descriptions.Item>
                            时长{parseInt((new Date(item.endDate)*1-new Date(item.beginDate)*1)/1000/60/60/24)}天
                          </Descriptions.Item>
                          <Descriptions.Item></Descriptions.Item>
                          <Descriptions.Item>
                            {item.beginDate}
                          </Descriptions.Item>
                          <Descriptions.Item>{item.endDate}</Descriptions.Item>
                        </Descriptions>
                        <Progress percent={item.planProgress} status="active" />
                        <TrainingPage {...props} id={item.id} />
                      </PageHeader>
                    </div>
                  ))}
                </TabPane>
              </Tabs>
              <Pagination size="small" total={total} current={current} pageSize={pageSize} onChange={(page, pageSize)=>{
                setCurrent(page);
                setPageSize(pageSize);
              }} showQuickJumper />
            </div>
          </TabPane>
          {/* 收藏页面组件 */}
          <TabPane tab="收藏项目" key="2">
            <TrainingFavor {...props} />
          </TabPane>
        </Tabs>
      </div>
      {/* 项目相关页面组件 */}
      <div className="training_right">
          <TrainingCorrelation {...props}/>
      </div>
    </div>
  );
};
export default Training;

